<template>
	<view class="top">
		<view class="calendar">
			<uni-calendar :insert="true" :lunar="true" :weekend="true" :school="false" :onlyCurrentWeek="true"
				:showMonth="false" />
		</view>
		<uni-section class='section1' title="学生情况" type="circle" title-font-size="33rpx" title-color="blue">
			<uni-grid :col="2" :showBorder="true" :square="false" borderColor=#ffff @change='change'>
				<uni-grid-item :index="1">
					<uni-icons type="person-filled" :size="46"></uni-icons>
					<view class="grid-text">学生信息</view>
				</uni-grid-item>
				<uni-grid-item :index="2">
					<uni-icons type="staff-filled" :size="46"></uni-icons>
					<view class="grid-text">学生成绩</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<uni-section class='section1' title="课程情况" type="circle" title-font-size="33rpx" title-color="blue">
			<uni-grid :col="2" :showBorder="true" :square="false" borderColor=#ffff @change='change'>
				<uni-grid-item :index="3">
					<uni-icons type="star-filled" :size="46"></uni-icons>
					<view class="grid-text">课程信息</view>
				</uni-grid-item>
				<uni-grid-item :index="4">
					<uni-icons type="calendar-filled" :size="46"></uni-icons>
					<view class="grid-text">课程签到</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<uni-section class='section1' title="缴费情况" type="circle" title-font-size="33rpx" title-color="red">
			<uni-grid :col="2" :showBorder="true" :square="false" borderColor=#ffff @change='change'>
				<uni-grid-item :index="5">
					<uni-icons type="plus-filled" :size="46"></uni-icons>
					<view class="grid-text">缴费信息</view>
				</uni-grid-item>
				<uni-grid-item :index="6">
					<uni-icons type="medal-filled" :size="46"></uni-icons>
					<view class="grid-text">缴费统计</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';

	export default {
		setup() {
			// 定义change方法，处理uni-grid的change事件
			const change = (e) => {
				const {
					index
				} = e.detail;
				uni.showToast({
					title: `点击第${index}个宫格`,
					icon: 'none'
				});

				if (index === 1) {
					// 学生信息
					uni.switchTab({
						url: '/pages/student/student-manage'
					});
				} else if (index === 2) {
					// 学生成绩
					uni.navigateTo({
						url: '/pages/student/student-score'
					});
				} else if (index === 3) {
					// 课程信息
					uni.switchTab({
						url: '/pages/class/class-info'
					});
				} else if (index === 4) {
					// 课程签到
					uni.navigateTo({
						url: '/pages/class/class-sign'
					});
				} else if (index === 5) {
					// 缴费登记
					uni.navigateTo({
						url: '/pages/paymentShow/paymentInfo'
					});
				} else if (index === 6) {
					// 缴费统计
					uni.navigateTo({
						url: '/pages/paymentShow/paymentShow'
					});
				}
			};

			return {
				change
			};
		}
	};
</script>

<style>
	.top {
		width: 100%;
	}

	.button {
		overflow: hidden;
	}

	.calendar {
		margin: 20rpx 10rpx;
		padding-bottom: 20rpx;
		border-bottom: 5rpx solid red;
	}

	.section1 {
		margin-top: 35rpx;
		margin-bottom: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		align-self: center;
		color: $u-type-info;
	}
</style>